<script setup lang="ts">
import { ref, computed } from 'vue'

const total = ref(400)
const pageSize = ref(4)
const currentPage = ref(1)

// 计算总页数
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

// 页面改变
const handlePageChange = (page: number) => {
  currentPage.value = page
}

// 每页条数改变
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1 // 重置到第一页
}
</script>

<template>
  <div class="container">
    <!-- 左侧文字 -->
    <span class="page-info">
      共 {{ total }} 条记录 第 {{ currentPage }} / {{ totalPages }} 页
    </span>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :page-sizes="[4, 10, 20, 50]"
      background
      layout="prev, pager, next, sizes, jumper"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.page-info {
  font-size: 0.8rem;
  color: #606266;
}
</style>
